<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:gqgy="http://www.thymeleaf.org/extras/gqgl"
>
    <div th:replace="common/common::html"></div>
    <head>
        <meta charset="UTF-8">
        <title th:text="#{menu.info}"></title>
        <script th:inline="javascript">
            var _gridWidth;
            var _gridHeight;
            //页面自适应
            function resizePageSize(){
                _gridWidth = $(document).width()-12-197;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
                _gridHeight = $(document).height()-72 - 44 - 209; /* -32 顶部主菜s单高度，   -90 查询条件高度*/
            }
            $(function () {
                resizePageSize();
                $("body").css("height",$(document).height() + "px");
                loadLeftTree();
                $("ul#tab-ul-menu-id>li").click(function (event) {
                    event.stopPropagation()
                    $(this).parent().find("a").removeClass("active");
                    $(this).find("a").addClass("active");
                    $("#tab-content-id > article").removeClass("in");
                    $("#tab-content-id > article").removeClass("active");
                    var tabId = $(this).attr("tab");
                    $("#" + tabId).addClass("in");
                    $("#" + tabId).addClass("active");


                });
                $("ul#tab-ul-menu-id>li:nth-child(1)").click();
                var _columnWidth = _gridWidth/6;
                $("#flexigrid-id").flexigrid({
                    width : _gridWidth,
                    height : _gridHeight,
                    url : /*[[@{queryMenuInfoListById}]]*/"",
                    dataType : 'json',
                    colModel : [
                        {display : 'menuId',name : 'menuId',width : 150,sortable : false,align : 'center',hide : 'true'},
                        {display : /*[[#{menu.name}]]*/"",name : 'menuName',width : _columnWidth, sortable : true,align : 'center'},
                        {display : /*[[#{menu.level}]]*/"",name : 'menuLevel',width : _columnWidth, sortable : true,align : 'center',process: function(v,_trid,_row) {
                                return $("select#menu-level-id > option[value="+v+"]").text();
                            }
                        },
                        {display : /*[[#{menu.icon}]]*/"",name : 'menuIcon',width : _columnWidth, sortable : true,align : 'center',process: function(v,_trid,_row) {
                                return '<i class="' + v + '"> </i>';
                            }
                        },
                        {display : /*[[#{menu.type}]]*/"",name : 'menuType',width : _columnWidth, sortable : true,align : 'center',process: function(v,_trid,_row) {
                                return $("select#menu-type-id > option[value="+v+"]").text();
                            }},
                        {display : "url",name : 'menuUrl',width : _columnWidth, sortable : true,align : 'center'},
                        {display : /*[[#{menu.auth}]]*/"",name : 'privilegeCode',width : _columnWidth, sortable : true,align : 'center'}

                    ],
                    resizable : false, //resizable table是否可伸缩
                    useRp : true,
                    usepager : false, //是否分页
                    autoload : false, //自动加载，即第一次发起ajax请求
                    hideOnSubmit : true, //是否在回调时显示遮盖
                    showcheckbox : false, //是否显示多选框
                    //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                    rowbinddata : true
                });
                // _gridWidth =  _gridWidth - 153;
                var _columnWidth = _gridWidth/3;

                $("#i18n-table-id").tableEditData({
                    width : _gridWidth,
                    height:400,
                    url:/*[[@{/menu/getI18nByMenuId}]]*/"",
                    colModel : [
                        {display : 'menuId',name : 'menuId',width : 150,align : 'center',hide : 'true'},
                        {display : /*[[#{menu.lang}]]*/"",name : 'langId',width : _columnWidth,dom: function(obj,v,_trid,_row){
                                var select = $("#lang-template-id").clone();
                                select.removeClass("fade");
                                select.val(v);
                                select.css("width","43%");
                                select.appendTo(obj);
                                select.attr("readonly",true);
                                if(_row){
                                    select.attr("disabled","disabled");
                                }else {
                                    select.removeAttr("disabled");
                                }

                                var span = $("<span></span>");
                                span.addClass("read");
                                var vl  =  select.find("option[value='" + v + "']").text();
                                span.text(vl);
                                span.appendTo(obj);


                            }},
                        {display : /*[[#{menu.name}]]*/"",name : 'menuName',width : _columnWidth},
                        {display : /*[[#{common.operation}]]*/"",name : 'menuName',width : _columnWidth,process: function(v,_trid,_row) {
                                var html='<a href="#" class="read" onclick="editTable(\''+ _trid +'\');"> <i class="fa fa-pencil"></i> </a>';
                                html +='<a href="#" class="edit" onclick="saveTable(\''+ _trid +'\');"> <i class="fa fa-floppy-o"></i> </a>';
                                html +='<a href="#" class="read" onclick="deleteTable(\''+ _trid +'\');"> <i class="fa fa-trash-o"></i> </a>';

                                return html;
                            }}
                    ]
                });

                $("#bound-menu-diaolog-id").dialog({
                    autoOpen : false,
                    width : 400,
                    modal : true,
                    resizable : false,
                    title: /*[[#{common.bound}]]*/'',
                    buttons: [
                        {
                            text: /*[[#{common.confirm}]]*/'',
                            click: function() {
                                var menuId = $("#menu-id").text();
                                var parentId = "";
                                var ztreeObj = $.fn.zTree.getZTreeObj("bound-menu-tree-id");
                                var checkNodes = ztreeObj.getCheckedNodes(true);
                                var menuArray = [];
                                $(checkNodes).each(function (index,item) {
                                    parentId = item.id;
                                });

                                if(parentId === ''){
                                    message(/*[[#{common.select}]]*/"");
                                    return;
                                }
                                $.ajax({
                                    type: 'post',
                                    async: false,
                                    dataType : 'json',
                                    url: /*[[@{saveParentIdByMenuId}]]*/'',
                                    data: [{name:"menuId",value:menuId},
                                        {name:"parentId",value:parentId}],
                                    success: function (data) {
                                        // console.info(data)
                                        loadLeftTree();
                                        $("#bound-menu-diaolog-id").dialog('close');
                                    },
                                    error: function(msg){
                                        message(/*[[#{common.error}]]*/'');
                                    }
                                });

                            }
                        },
                        {
                            text: /*[[#{common.cancel}]]*/'',
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                    ]
                });

                $("#bound-btn-id").click(function (evnet) {
                    evnet.stopPropagation();
                    // $("#bound-menu-diaolog-id").dialog('open');
                    boundTree();
                })
                $("#unbound-btn-id").click(function (event) {
                    event.stopPropagation();
                    var menuId = $("#menu-id").text();
                    $.ajax({
                        type: 'post',
                        async: false,
                        dataType : 'json',
                        url: /*[[@{unboundParentIdByMenuId}]]*/'',
                        data: [
                            {name:"menuId",value:menuId}
                        ],
                        success: function (data) {
                            message(data.msg);
                            loadLeftTree();
                        },
                        error: function(msg){
                            message(/*[[#{common.error}]]*/'');
                        }
                    })
                })
                // 新增
                $("#add-btn-id").click(function (event) {
                    event.stopPropagation()
                    $("#add-organ-form-id").resetForm();
                    $("#add-organ-dialog-id").dialog('open')
                })

                $("#add-organ-dialog-id").dialog({
                    autoOpen : false,
                    width : 400,
                    modal : true,
                    resizable : false,
                    title: /*[[#{menu.add.info}]]*/'',
                    buttons: [
                        {
                            text: /*[[#{common.confirm}]]*/'',
                            click: function() {
                                $("#add-organ-form-id").submit();
                            }
                        },
                        {
                            text: /*[[#{common.cancel}]]*/'',
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                    ]
                });

                $("#add-organ-form-id").ajaxForm({
                    dataType: "json",
                    success : function(data) {
                        message(data.msg);
                        loadLeftTree();
                        $("#add-organ-dialog-id").dialog('close');
                    },
                    error : function() {
                        message(/*[[#{common.error}]]*/'');
                    }
                });



                // 删除
                $("#delete-btn-id").click(function (event) {
                    event.stopPropagation();
                    var menuIdVal = menuId.value;
                    $.ajax({
                        type: 'post',
                        async: false,
                        dataType : 'json',
                        url: /*[[@{deleteMenuInfoByMenuId}]]*/'',
                        data: [
                            {name:"menuId",value:menuIdVal}
                        ],
                        success: function (data) {
                            message(data.msg);
                            loadLeftTree();
                        },
                        error: function(msg){
                            message(/*[[#{common.error}]]*/'');
                        }
                    })
                })

            });//ready
            function query(menuId) {

                $("#flexigrid-id").flexOptions({
                    extParam:[
                        {name:"menuId",value:menuId}
                    ]
                }).flexReload();
            }

            function queryI18n(menuId) {
                $("#i18n-table-id").tableEditOptions({
                    extParam:[
                        {name:"menuId",value:menuId}
                    ]
                }).tableEditReload();


            }

            var leftSetting = {
                check: {
                    enable: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback:{
                    onClick:onClickNode
                }
            };

            function loadLeftTree() {
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{queryLeftTree}]]*/'',
                    data: [],
                    success: function (data) {
                        // console.info(data)
                        $.fn.zTree.init($("#left-tree-id"), leftSetting, data);
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });


            }

            function onClickNode(event, treeId, treeNode) {
                // console.info( treeNode)
                var menuId = treeNode.id;
                $("#menu-id").text(menuId);
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{queryMenuListById}]]*/'',
                    data: [{name:"menuId",value:menuId}],
                    success: function (data) {
                        console.info(data)
                        $("#menuId").val(data.menuId);
                        $("#menuName").val(data.menuName);
                        $("#menuType").val(data.menuType);
                        $("#menuLevel").val(data.menuLevel);
                        $("#menuUrl").val(data.menuUrl);
                        $("#menuSeq").val(data.menuSeq);
                        $("#privilegeCode").val(data.privilegeCode);
                        $("#menuIcon").val(data.menuIcon);
                        $("#parentId").val(data.parentId);
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
                query(menuId);
                queryI18n(menuId);
            }

            function deleteTable (trId) {
                var menuId =  $("#" + trId + " input[name='menuId']").val();
                var langId =  $("#" + trId + " select[name='langId']").val();
                // console.info(menuId);
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{deleteMenuI18nById}]]*/'',
                    data: [{name:"menuId",value:menuId},
                        {name:"langId",value:langId}],
                    success: function (data) {
                        message(data.msg)
                        queryI18n(menuId);
                        // console.info(data)

                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });

            }

            function saveTable(trId) {
                var menuId =  $("#menu-id").text();
                var langId =  $("#" + trId + " select[name='langId']").val();
                var menuName =  $("#" + trId + " input[name='menuName']").val();
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{saveMenuI18n}]]*/'',
                    data: [
                        {name:"menuId",value:menuId},
                        {name:"langId",value:langId},
                        {name:"menuName",value:menuName}
                    ],
                    success: function (data) {
                        message(data.msg)
                        queryI18n(menuId);
                        // console.info(data)

                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            }

            function editTable(trId) {
                $("#" + trId).addClass("table-edit-tr");

            }

            var BoundMenuSetting = {
                check: {
                    enable: true,
                    chkStyle: "radio",
                    radioType: "all"
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };

            function boundTree() {
                var menuId = $("#menu-id").text();
                if(menuId === ''){
                    message(/*[[#{common.select}]]*/'')
                    return;
                }

                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{queryBoundMenuTree}]]*/'',
                    data: [
                        {name:"menuId",value:menuId}
                    ],
                    success: function (data) {
                        $.fn.zTree.init($("#bound-menu-tree-id"), BoundMenuSetting, data);

                        var ztreeObj = $.fn.zTree.getZTreeObj("bound-menu-tree-id");
                        var nodes = ztreeObj.getNodesByParam("id",menuId,null);
                        ztreeObj.removeNode(nodes[0]);


                        $("#bound-menu-diaolog-id").dialog('open');

                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            }

            // 组织修改
            function updateMenuInfo() {
                var menuIdVal =  menuId.value;
                var menuNameVal =  menuName.value;
                var parentIdVal =  parentId.value;
                var menuTypeVal =  menuType.value;
                var menuLevelVal =  menuLevel.value;
                var menuUrlVal =  menuUrl.value;
                var privilegeCodeVal =  privilegeCode.value;
                var menuIconVal =  menuIcon.value;
                var menuSeqVal =  menuSeq.value;

                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{updateMenuInfo}]]*/'',
                    data: [
                        {name:"menuId",value:menuIdVal},
                        {name:"menuName",value:menuNameVal},
                        {name:"parentId",value:parentIdVal},
                        {name:"menuType",value:menuTypeVal},
                        {name:"menuLevel",value:menuLevelVal},
                        {name:"menuUrl",value:menuUrlVal},
                        {name:"privilegeCode",value:privilegeCodeVal},
                        {name:"menuIcon",value:menuIconVal},
                        {name:"menuSeq",value:menuSeqVal}
                    ],
                    success: function (data) {
                        message(data.msg)
                        queryI18n(menuId);
                        // console.info(data)

                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            }


        </script>
        <style>
            .form-group{
                margin: 0 10px;
            }
            .gqgl-tb-th{
                height: 32px;
                background-color: #b5b5b5;
                background: #f5f5f5;
                border-top: #d4d4d4 1px solid;
                background-color: #fff;
            }
            .gqgl-tb-th > th{
                font-weight: normal;
                cursor: default;
                white-space: nowrap;
                overflow: hidden;
                text-align: center;
                vertical-align: middle !important;
                padding: 0px;
                height: 32px;
                background-color: #b5b5b5;
                box-sizing: border-box;
                color: #FFF;
                font-size: 12px;
            }

            .table-edit-data td{
                text-align: center;
                vertical-align: middle !important;
                padding: 0px;
                height: 32px;
                font-size: 12px;
                background-color: #f5f5f5;
            }
            .table-erow td{
                background-color: #ededed;
            }
            .table-edit-data .read{
                display: inline-block;
                margin-right: 10px;
            }
            .table-edit-data .edit{
                display: none;
            }
            .table-edit-tr .edit{
                display: inline-block;
            }
            .table-edit-tr .read{
                display: none;
            }
             body{
                 background-color: #E6E6FA
             }

        </style>
    </head>
    <body style="display: flex;flex-direction: row">
        <div style="flex-basis: 192px;background-color: #99bbe8;overflow:scroll;">
            <ul id="left-tree-id"  class="ztree" >

            </ul>
        </div>

        <div style="flex-grow: 1;display: flex;flex-direction: column;">
            <nav style="flex-basis: 30px;margin-top: 10px;">
                <a id="bound-btn-id" href="#" class="navbar-btn btn">
                    <i class="glyphicon glyphicon-link"></i>
                    <span th:text="#{common.bound}"></span>
                </a>
                <a id="unbound-btn-id" href="#" class="navbar-btn">
                    <i class="glyphicon glyphicon-paperclip"></i>
                    <span th:text="#{common.unbound}"></span>
                </a>
                <a id="delete-btn-id" href="#" class="navbar-btn">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span th:text="#{common.delete}"></span>
                </a>
                <a id="add-btn-id" href="#" class="navbar-btn">
                    <i class="glyphicon glyphicon-plus-sign"></i>
                    <span th:text="#{common.add}"></span>
                </a>
                <a id="update-btn-id" href="#" class="navbar-btn" onclick="updateMenuInfo();">
                    <i class="glyphicon glyphicon-floppy-disk"></i>
                    <span th:text="#{common.modify}"></span>
                </a>

            </nav>
            <article style="flex-basis: 162px;">
                <form style="display: grid;grid-template-columns: auto auto auto">
                    <div class="form-group">
                        <span th:text="#{menu.uuid}"></span>
                        <input  class="form-control" type="text" id="menuId"></input>
                    </div>
                    <div class="form-group">
                        <span th:text="#{menu.name}"></span>
                        <input  class="form-control" type="text" id="menuName"></input>
                    </div>
                    <div class="form-group">
                        <span th:text="#{menu.type}"></span>
                        <!--                    <input id="menu-type-id" class="form-control" type="text"></input>-->
                        <select  class="form-control" gqgy:dicselect="menu.type" id="menuType"></select>
                    </div>
                    <div class="form-group">
                        <span th:text="#{menu.level}"></span>
                        <select  class="form-control" gqgy:dicselect="menu.level" id="menuLevel"></select>
                    </div>
                    <div class="form-group">
                        <span>URL</span>
                        <input  class="form-control" type="text" id="menuUrl"></input>
                    </div>
                    <div class="form-group">
                        <span th:text="#{menu.seq}"></span>
                        <input  class="form-control" type="text" id="menuSeq"></input>
                    </div>
                    <div class="form-group">
                        <span th:text="#{menu.auth}"></span>
                        <input  class="form-control" type="text" id="privilegeCode"></input>
                    </div>
                    <div class="form-group">
                        <span th:text="#{menu.icon}"></span>
                        <input  class="form-control" type="text" id="menuIcon"></input>
                    </div>
                    <div class="form-group">
                        <span th:text="#{menu.parent}"></span>
                        <!--                    <input id="menu-parent-id" class="form-control" type="text"></input>-->
                        <select  class="form-control" gqgy:dataSelect="${session.menuList}" readonly="true" id="parentId"></select>
                    </div>

                </form>
            </article>
            <article style="flex-grow: 1;margin-top:10px;">
                <ul id="tab-ul-menu-id" class="nav nav-tabs">
                    <li tab="tab-i18n-id">
                        <a href="#">
                            <i class="fa fa-university"></i>
                            <span th:text="#{common.i18n.name}"></span>

                        </a>
                    </li>
                    <li tab="tab-son-menu-id">
                        <a href="#">
                            <i class="fa fa-th"></i>
                            <span th:text="#{menu.son.name}"></span>

                        </a>
                    </li>
                </ul>

                <section id="tab-content-id" class="tab-content">
                    <article id="tab-i18n-id" class="tab-pane fade in active">
                        <!--                <span th:text="#{common.i18n.name}"></span>-->
                        <select  id="lang-template-id" class="edit fade" name="langId"  gqgy:dicselect="lang.type"></select>
                        <table id="i18n-table-id" class="table-edit-data"></table>
                    </article>
                    <article id="tab-son-menu-id" class="tab-pane fade">
                        <!--                <span th:text="#{menu.son.name}"></span>-->
                        <table id="flexigrid-id"></table>

                    </article>
                </section>


            </article>

            </article>
        </div>

        <div id="bound-menu-diaolog-id" style="display: none">
            <ul id="bound-menu-tree-id" class="ztree">

            </ul>
        </div>

        <div id="add-organ-dialog-id" style="display: none">
            <form id="add-organ-form-id" th:action="@{addMenuInfo}" method="post">
                <div class="form-group">
                    <span th:text="#{menu.add.name}"></span>
                    <input class="form-control" id="add-menu-name-id" type="text" name="menuName">
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.parent.id}"></span>
                    <input class="form-control" id="add-menu-parent-id" type="text" name="parentId">
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.type}"></span>
                    <select id="add-menu-type-id" class="form-control" gqgy:dicselect="menu.type" name="menuType"></select>
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.type}"></span>
                    <select id="add-menu-level-id" class="form-control" gqgy:dicselect="menu.level" name="menuLevel"></select>
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.url}"></span>
                    <input class="form-control" id="add-menu-url-id" type="text" name="menuUrl">
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.privilege.code}"></span>
                    <input class="form-control" id="add-menu-privilege-code-id" type="text" name="privilegeCode">
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.icon}"></span>
                    <input class="form-control" id="add-menu-icon-id" type="text" name="menuIcon">
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.seq}"></span>
                    <input class="form-control" id="add-menu-seq-id" type="text" name="menuSeq">
                </div>

            </form>
        </div>

    </body>
</html>